<script setup lang="ts">
import Plotly from 'plotly.js-dist-min'
import { onMounted, ref } from 'vue'

const chartContainer = ref<HTMLElement | null>(null)
const waveformContainer = ref<HTMLElement | null>(null)

// Sample data for the line chart
const xData = [
  '2023-01',
  '2023-02',
  '2023-03',
  '2023-04',
  '2023-05',
  '2023-06',
  '2023-07',
  '2023-08',
  '2023-09',
  '2023-10',
  '2023-11',
  '2023-12',
]
const yData1 = [120, 360, 210, 280, 430, 495, 160, 180, 268, 324, 500, 470]
const yData2 = [234, 290, 176, 342, 389, 452, 298, 320, 410, 380, 420, 390]

// Generate waveform data
const generateWaveformData = () => {
  const timePoints = 1000
  const timeData = Array.from({ length: timePoints }, (_, i) => (i / timePoints) * 3)
  const amplitudeData = []

  for (let i = 0; i < timePoints; i++) {
    const t = timeData[i]
    let frequency, amplitude

    // Initial high amplitude oscillation with dampening
    if (t < 0.3) {
      amplitude = Math.exp(-t * 5) * 300
      frequency = 15
    }
    // Medium frequency section
    else if (t < 0.8) {
      amplitude = 100
      frequency = 25
    }
    // Lower amplitude higher frequency section
    else if (t < 1.3) {
      amplitude = 50
      frequency = 40
    }
    // Increasing amplitude section
    else if (t < 2) {
      amplitude = 70
      frequency = 30
    }
    // Final section
    else {
      amplitude = 80
      frequency = 20
    }

    amplitudeData.push(amplitude * Math.sin(2 * Math.PI * frequency * t))
  }

  return { timeData, amplitudeData }
}

onMounted(() => {
  if (chartContainer.value) {
    const data = [
      {
        x: xData,
        y: yData1,
        type: 'scatter',
        mode: 'lines+markers',
        name: '系列1',
        line: {
          color: '#1890ff',
          width: 2,
        },
        marker: {
          color: '#1890ff',
          size: 6,
        },
      },
      {
        x: xData,
        y: yData2,
        type: 'scatter',
        mode: 'lines+markers',
        name: '系列2',
        line: {
          color: '#36cbcb',
          width: 2,
        },
        marker: {
          color: '#36cbcb',
          size: 6,
        },
      },
    ]

    const layout = {
      title: '折线图示例',
      xaxis: {
        title: '月份',
      },
      yaxis: {
        title: '数值',
      },
      autosize: true,
      height: 500,
      margin: {
        l: 50,
        r: 50,
        b: 50,
        t: 50,
        pad: 4,
      },
      legend: {
        orientation: 'h' as const,
        y: 1.1,
      },
    }

    Plotly.newPlot(chartContainer.value, data as any, layout)

    // Responsive chart
    window.addEventListener('resize', () => {
      if (chartContainer.value) {
      Plotly.relayout(chartContainer.value, {
        autosize: true,
      })
      }
    })
  }

  // Create waveform chart
  if (waveformContainer.value) {
    const { timeData, amplitudeData } = generateWaveformData()

    const data = [
      {
        x: timeData,
        y: amplitudeData,
        type: 'scatter',
        mode: 'lines',
        name: '11:0',
        line: {
          color: '#1890ff',
          width: 2,
        },
      },
    ]

    const layout = {
      title: 'a相定子电流',
      font: {
        family: 'Arial, sans-serif',
      },
      xaxis: {
        title: '时间 (s)',
        gridcolor: '#e6e6e6',
        zerolinecolor: '#e6e6e6',
        showline: true,
        linecolor: '#e6e6e6',
      },
      yaxis: {
        title: '相电流子电流',
        gridcolor: '#e6e6e6',
        zerolinecolor: '#e6e6e6',
        showline: true,
        linecolor: '#e6e6e6',
        range: [-350, 350],
      },
      autosize: true,
      height: 500,
      plot_bgcolor: 'black',
      paper_bgcolor: 'black',
      margin: {
        l: 60,
        r: 50,
        b: 60,
        t: 50,
        pad: 4,
      },
    }

    const config = {
      responsive: true,
      displayModeBar: true,
      modeBarButtonsToAdd: ['drawline', 'drawopenpath', 'drawclosedpath', 'drawcircle', 'drawrect', 'eraseshape'] as any,
      modeBarButtonsToRemove: ['lasso2d' as any],
      toImageButtonOptions: {
        format: 'png' as const,
        filename: 'waveform_chart',
        height: 800,
        width: 1200,
      },
    }

    Plotly.newPlot(waveformContainer.value, data as any, layout, config)

    // Responsive chart
    window.addEventListener('resize', () => {
      if (waveformContainer.value) {
      Plotly.relayout(waveformContainer.value, {
        autosize: true,
      })
      }
    })
  }
})
</script>

<template>
  <div class="charts-wrapper">
    <div class="chart-container">
      <div ref="chartContainer" class="plotly-chart"></div>
    </div>
    <div class="chart-container">
      <div ref="waveformContainer" class="plotly-chart"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.charts-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.chart-container {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .plotly-chart {
    width: 100%;
    height: 500px;
  }
}
</style>
